import { ITodoData } from '../../../typings';

//该类为抽象类，专门管理组件相关的公共方法
abstract class Component {
  //静态方法(原型上使用)
  //仅供自身和子类访问使用
  //视图模板方法
  protected static inputView(
    placeholderText: string,
    buttonText: string
  ): string {
    return `
      <div>
        <input type="text" class="todo-input" placeholder="${placeholderText}" />
        <button class="add-btn">${buttonText}</button>
      </div>
    `;
  }

  protected static listView(data: ITodoData[]): string {
    return `
      <div class="todo-list">
        ${
          data.length
            ? data.map((todo: ITodoData) => {
                return Component.todoView(todo);
              })
            : '当前没有数据'
        } 
      </div>
    `
      .split(',')
      .join('');
  }

  /**
   * 接收一项todoItem并对其进行模板拼接
   * @param todo item对象
   * @returns 返回一段todo-item的字符串
   */
  protected static todoView(todo: ITodoData): string {
    const { id, content, completed } = todo;

    return `
      <div class="todo-item">
        <input type="checkbox" data-id="${id}" ${completed ? 'checked' : ''} />
        <span style="text-decoration: ${
          completed ? 'line-through' : ''
        }">${content}</span>
        <button data-id="${id}">删除</button>
      </div>
    `;
  }
}

export default Component;
